import { defineStore } from "pinia";
import { store } from "@/store";
import { mapType } from "./types";

export const useMapStore = defineStore({
    id: "pure-map",
    state: (): mapType => ({
        // 交管名称自增值
        incrementalName: null,
        // 新增交管弹框开关
        crossSwitch: false,
        // 交管坐标数据插入开关
        crossInsert: false,
        // 交管插入坐标索引
        crossIndex: 0,
        // 交管数据
        crossDetail: {
            status: 1,
            name: "",
            type: 1,
            stationList: []
        },
        stageKonva: {},
        crossName: "", //交管名称
        crossStatus: 0, //交管状态
        targetCross: {}, //选中的交管
        // webscoket动态数据 
        scoketData: {
            AgvData: [],
            JobData: [],
            LogData: [],
            CrossData: [],
            CallData: [],
            CrossMsgData: []
        }
    }),
    actions: {
        // 修改交管自增名称
        changeName(val) {
            this.incrementalName = val
        },
        // konva组件stage挂载
        getStage(val) {
            this.stageKonva = val
        },
        // 地图上绘制交管时的开关
        operateDrawer(val) {
            this.crossSwitch = val
        },
        // 新增交管坐标数据
        addCrossList(val) {
            // console.log('仓库=》', this.crossDetail.stationList);
            if (this.crossDetail.stationList[0].x === undefined) {
                this.crossDetail.stationList[0] = val.stationList
            } else {
                if (this.crossInsert) {
                    this.crossDetail.stationList.splice(this.crossIndex, 1, val.stationList)
                    // this.crossDetail.stationList.splice(this.crossIndex + 1, 1)
                    this.crossInsert = false
                } else {
                    this.crossDetail.stationList.push(val.stationList)
                }
                // console.log('仓库=》', this.crossDetail.stationList);
            }
        },
        // 被激活的区域
        getCross(val) {
            if (Object.keys(this.targetCross).length === 0) {
                val.children.forEach(v => {
                    if (v.name() === 'circle') {
                        v.fill('#a6290c')
                    } else {
                        v.stroke('#a6290c')
                    }
                })
            } else {
                val.children.forEach(v => {
                    if (v.name() === 'circle') {
                        v.fill('#a6290c')
                    } else {
                        v.stroke('#a6290c')
                    }
                })

                if (val.name() !== this.targetCross.name()) {
                    // 交管颜色
                    const crossColor = new Map([
                        [1, 'rgba(126, 192, 80, 1)'],
                        [2, 'rgba(52, 120, 198, 1)'],
                        [3, '#FF00FF'],
                        [4, '#b76f40'],
                        [5, '#00FFFF']
                    ])
                    // const color = this.targetCross.attrs.type === 1 ? 'rgba(126, 192, 80, 1)' : 'rgba(52, 120, 198, 1)'
                    const color = crossColor.get(this.targetCross.attrs.type)
                    this.targetCross.children.forEach(v => {
                        if (v.name() === 'circle') {
                            v.fill(color)
                        } else {
                            v.stroke(color)
                        }
                    })
                }

            }
            this.targetCross = val
        },
        // 清空数据
        clearCross() {
            this.crossDetail.stationList.length = 0
        },
    }
});

export function useMapStoreHook() {
    return useMapStore(store);
}
